<template>
	<view>
		<view v-if="pageMsg.length">
			<view v-if="pageMsg">
				<view class="device-img img2">
					<img :src="homePageData.url" alt="" style="width: 100%; height: 100%">
				</view>
				<view class="device-p">
					<p class="text-tip" v-for="(item, index) in homePageData.text" :key="index">
						<span :style="{color: item.color, fontSize: item.size+'px'}">
							{{ item.content }}
						</span>
					</p>
				</view>
				<view class="foot-button">
					<view class="text-top">
						<text v-for="(item, index) in homePageData.pop" :key="index"
							:style="{fontSize: item.size+'px', color: item.color}" @tap="onClick(item)">
							{{ item.content }}
						</text>
					</view>
					<button class="block radius-btn" @tap="nextstep()" type="operation"
						:style="{fontSize: homePageData.btn.size+'px', color: homePageData.btn.color}">
						{{ homePageData.btn.content }}
					</button>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="device-img">
				<img src="https://statics.xmcsrv.net/weixin/Telkomsel/qsocket.png" alt="">
			</view>
			<view class="device-p">
				<p><span>{{$t('connectNet.refer_to_manual')}}，</span>
					{{$t('connectNet.for')+ deviceName +$t('connectNet.connect_power')}}，{{ $t('connectNet.ensure')+ deviceName+$t('connectNet.in_normal_operation') }}
				</p>
			</view>
			<view class="foot-button">
				<button class="block radius-btn" @tap="nextstep()" type="operation">{{$t('General.login.nextStep')}}
				</button>
			</view>
		</view>

		<uni-popup ref="popup" backgroundColor="#fff">
			<view class="popup-box">
				<view class="pop-title">
					<text style="font-size: 16px; font-weight: 600;">{{ popData.title }}</text>
				</view>
				<view class="pop-content">
					<view v-for="(item, index) in popData.data" :key="index">
						<view>
							<text v-if="item.type == 0" :style="{fontSize: item.size+'px', color: item.color}">{{
                  item.content
                }}
							</text>
						</view>
						<view style="text-align: center">
							<image v-if="item.type == 1" :src="item.content" mode="widthFix" style="width: 420rpx;">
							</image>
						</view>
					</view>
				</view>
				<view class="pop-btn-box">
					<button class="pop-btn" @click="handleFn">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		objGet
	} from "@/uni_modules/uni-forms/components/uni-forms/utils";

	export default {
		data() {
			return {
				connecttype: '',
				deviceName: '',
				type: 1,
				parentPid: '',
				pageMsg: [],
				homePageData: {},
				greenLNF: {},
				netFailure: {},
				popData: {},
				quickResponseCode: {}
			};
		},
		onLoad(opt) {
			this.connecttype = opt.connecttype
			this.deviceName = opt.deviceName || this.$t('connectNet.this_device')
			this.parentPid = opt.parentPid || ''
			if (Object.keys(opt).length != 0) {
				this.type = opt.type
			}
			this.pageMsg = opt.pageMsg ? JSON.parse(opt.pageMsg) : []
			this.getList(this.pageMsg)
			uni.setNavigationBarTitle({
				title: this.$t('connectNet.power_on_device')
			});
		},
		methods: {
			handleFn() {
				this.$refs.popup.close()
			},
			onClick(obj) {
				console.log(obj, '弹窗的参数')
				const data = {
					pageId: obj.params.pageId,
					page: obj.params.page,
					limit: obj.params.limit
				}
				getApp().globalData.api.getDeviceGuideByPageId(data, (res) => {
					console.log(res, '绿灯没有闪烁返回的数据')
					this.popData = res
					this.popData.title = obj.content
					console.log(this.popData)
					this.$nextTick(() => {
						this.$refs.popup.open()
					})
				})
			},
			nextstep() {
				switch (this.connecttype) {
					case 'qrcode':
						this.$postPointData({
							code: '601601',
							eventName: 'click_scan_guide_first_next_button'
						})
						break;
					case 'wifi':
						this.$postPointData({
							code: '601014',
							eventName: 'click_wifi_config_guide_first_next_button'
						})
						break;
				}
				let url = '/jvss/pagesDevice/device/qrcode/device-status'
				if (this.type == 2) {
					url = '/jvss/pagesDevice/device/wifi/wifi?netFailure=' + JSON.stringify(this.netFailure) +
						'&quickResponseCode=' + JSON.stringify(this.quickResponseCode)
				}
				uni.navigateTo({
					url: url
				});
			},
			getList(pageMsg) {
				if (pageMsg) {
					this.pageMsg.forEach(item => {
						if (item.pageType === 'powerOn') {
							this.splitObjFn(item, this.homePageData, 0)
						}
						if (item.pageType === "netFailure") {
							this.netFailure = item
						}
						if (item.pageType === "quickResponseCode") {
							this.quickResponseCode = item
						}
					})
					console.log('homePageData====', this.homePageData);
				}
			},
			splitObjFn(arr, obj, status) {
				if (status === 0) {
					uni.setNavigationBarTitle({
						title: this.pageMsg[0].title
					})
					obj.text = []
					obj.pop = []
					arr.content.forEach(o => {
						if (o.type == 1) {
							// 图片
							console.log(o.content)
							obj.url = o.content
						}
						if (o.type == 0) {
							// 文字
							obj.text = [...obj.text, o]
						}
						if (o.type == 2) {
							// 弹窗
							obj.pop = [...obj.pop, o]
						}
						if (o.type == 3) {
							// 按钮
							obj.btn = o
						}
					})
				}

				console.log(obj, '改变后的数据')
			}

		}
	}
</script>

<style lang="scss">
	.device-img {
		width: 200rpx;
		height: 200rpx;
		// border: #FF0025 1px solid;
		margin: auto;
		margin-top: 60px;
		margin-bottom: 30px;
		border-radius: 50%;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.device-p {
		text-align: center;
		font-size: 30rpx;
		padding: 0 50rpx;

		span {
			color: #FF0025;
		}
	}

	.img2 {
		width: 400rpx;
		height: 400rpx;
	}

	.text-tip {
		font-weight: 600;
		padding: 10px 0 5px;
	}

	.text-top {
		padding-bottom: 80rpx;
		text-align: center;
	}

	/deep/ .uni-popup__wrapper {
		border-radius: 10px;
	}

	.popup-box {
		width: 540rpx;
		//height: 980rpx;
		display: flex;
		padding: 32rpx 20rpx 32rpx 26rpx;
		border-radius: 10px;
		box-sizing: border-box;
		flex-direction: column;
		justify-content: start;
		align-items: center;

		.pop-title {
			margin-bottom: 30rpx;
		}

		.pop-btn-box {
			width: 90%;
			margin-top: 40rpx;

			button {
				height: 35px;
				line-height: 35px;
				font-size: 16px;
				color: #fff;
				border-radius: 20px;
				background-color: #FF0025;
			}
		}
	}
</style>